<!DOCTYPE html>
<html>

<style>
  .test {
    object-fit: contain;
  }

  img {
    border: 2px solid black;
    height: 200px;
    width: 250px;
  }
</style>

<body>
  <!-- The blue sector of the images should be at 12 o'clock. -->
  <img class="test" title="png image" onload="load()" src="resources/red-at-12-oclock-with-color-profile.png">
  <img class="test" title="jpg image" onload="load()" src="resources/red-at-12-oclock-with-color-profile.jpg">
</body>

<script>
var images = 0;

function load() {
  if (++images == 2 && window.testRunner)
    setTimeout(function() { testRunner.notifyDone() }, 0);
}

if (window.testRunner)
  testRunner.waitUntilDone();
</script>
</html>
